<template>
	<view class="address">
		<view class="address-main">
			<!-- 店铺地址 -->
			<view class="shop">
				<view class="title">店铺地址</view>
				<view class="" v-if="shopAddress.length==0"  @tap.stop="goChoiceShop"  >
					<view class="shopAddress" style="line-height: 30rpx;height: 80rpx;">
						请选择店铺地址
					<u-icon name="arrow-right" size="24" color="#7F8084" style="float: right;"></u-icon></view>
				</view>
				<view class="shopAddress" v-else @tap.stop="goChoiceShop" >
					<view class="address">{{shopAddress.shop_name}}</view>
					<view class="name">{{shopAddress.address}}</view>
					<view class="timeBox flex-r-b-c">
						<view class="time_l flex-r-c-c">
							<image src="/static/my/dz.png" mode=""></image>
							<view class="text">{{shopAddress.distance}}km |
								点单营业时间{{shopAddress.business_hours}}</view>
						</view>
						<image src="/static/shop/dz.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="listBox">
				<view class="title">收货地址</view>
				<view class="list" v-for="(item,index) in addressList" :key="index" @tap.stop="chooseAddress(item)">
					<view class="list_t flex-r-b-c">
						<view class="title one-line-ellipsis">{{item.receipt_address}}&emsp;{{item.address}}</view>
						<view class="default" v-if="item.is_default == 1">默认地址</view>
						<!--  -->
					</view>
					<view class="list_b flex-r-b-c">
						<view class="text">{{item.name}} | {{item.mobile}}</view>
						<image src="/static/my/dzxg.png" mode="" @tap.stop="edit(item)"></image>
					</view>
				</view>
			
			</view>
		</view>

		<!-- 按钮 -->
		<view class="btn" @tap.stop="addAddress">添加地址</view>



		<!-- 添加地址弹框 -->
		<u-popup v-model="addShow" mode="bottom" height="85%" border-radius="40">
			<view class="form">
				<view class="list flex-r-b-c">
					<view class="text">收货人</view>
					<input type="text" placeholder="请输入姓名" v-model="form.name">
				</view>
				<view class="list flex-r-b-c">
					<view class="text">性别</view>
					<u-radio-group v-model="form.gender" active-color="#000" @change="radioGroupChange">
						<u-radio name="3">保密</u-radio>
						<u-radio name="1">男</u-radio>
						<u-radio name="2">女</u-radio>
					</u-radio-group>
				</view>
				<view class="list flex-r-b-c">
					<view class="text">手机号</view>
					<input type="tel" placeholder="请输入手机号" v-model="form.mobile">
				</view>
				<view class="list flex-r-b-c" @tap.stop="WXAddress">
					<view class="text">收货地址</view>
					<input style="width: 70%;" type="text" placeholder="请选择收货地址" disabled v-model="form.receipt_address">
				</view>
				<view class="list flex-r-b-c">
					<view class="text">详细地址</view>
					<input style="width: 70%;" type="text" placeholder="请输入详细地址" v-model="form.address">
				</view>
				<view class="default flex-r-s-c">
					<view class="text" style="margin-right: 20rpx;">视为默认地址</view>
					<u-switch v-model="isSwitch" size="30" active-color="#000" inactive-color="#eee"></u-switch>
				</view>

				<!-- <view class="popupBtn">保存</view> -->
				<view class="popupBtn" @tap.stop="determineBtn">确定</view>
				<view class="deleteBtn" @tap.stop="deleteBtn">{{form.id == '' ? '取消' : '删除' }}</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {},
				addShow: false,
				shopAddress: {},
				addressList: [],
				isSwitch: false,
				form: {
					name: '',
					gender: '',
					mobile: '',
					receipt_address: '',
					address: '',
					is_default: '',
					id: '',
					lng: '',
					lat: '',
				},
			};
		},
		onLoad(el) {
			this.pageData = JSON.parse(el.data)
		},
		// onUnload(){
		// 	uni.reLaunch({
		// 		url: "/pages/tabBar/shop/shop?shopAddress="+ JSON.stringify(this.shopAddress)
		// 	})
		// },
		onShow(){
			this.getAddressList() // 获取地址列表
		},
		methods: {
			addAddress(){
				this.initialization()
				this.addShow = true
			},
			// 选中收货地址
			chooseAddress(e){
				console.log(e,'ee')
				uni.setStorageSync('myAddress',e)
				uni.navigateBack({
					delta:1
				})
			},
			// 初始化
			initialization(){
				this.isSwitch = false
				this.form = {
					name: '',
					gender: '',
					mobile: '',
					receipt_address: '',
					address: '',
					is_default: '',
					id: '',
					lng: '',
					lat: '',
				}
			},
			// 获取地址列表
			getAddressList() {
				let that = this
				that.$api.addressLocation(that.pageData).then(res => {
					that.shopAddress = res.data.data.shop
					uni.setStorageSync('shopAddress',that.shopAddress)
					uni.setStorageSync('shop_id',uni.getStorageSync('shopAddress').shop_id)
					uni.setStorageSync('shop_name',uni.getStorageSync('shopAddress').shop_name)
					if(that.shopAddress.length !=0){
						that.shopAddress.distance=that.shopAddress.distance.toFixed(1)
					}
					
					that.addressList = res.data.data.addres
					// console.log(that.addressList,'that.addressList')
					if(that.addressList.length==0) uni.removeStorageSync('myAddress')
				})
			},
			// 地址删除
			deleteBtn(){
				let that = this
				if(that.form.id == ''){
					that.initialization()
					that.addShow = false
				} else {
					that.$api.addressDel({
						id: that.form.id
					}).then(res => {
						that.$utils.toast('删除成功')
						setTimeout(() => {
							that.addShow = false
							that.getAddressList()
							that.initialization()
						}, 1000)
					})
				}
			},
			// 地址添加
			determineBtn() {
				let that = this
				if (that.form.name == '') return that.$utils.toast('请输入收货人名称')
				if (that.form.gender == '') return that.$utils.toast('请选择性别')
				if(!that.$utils.testifyMobile(that.form.mobile)) return that.$utils.toast('请输入正确的手机号')
				if (that.form.receipt_address == '') return that.$utils.toast('请选择收货地址')
				that.isSwitch == true ? that.form.is_default = '1' : that.form.is_default = '2'
				that.$api.addressAddUpd(that.form).then(res => {
					that.form.id == '' ? that.$utils.toast('添加成功') : that.$utils.toast('修改成功')
					setTimeout(() => {
						that.addShow = false
						that.initialization()
						that.getAddressList()
					}, 1000)
				})
			},
			// 地址编辑
			edit(el){
				let that = this
				that.$api.addressDetail({
					id:el.id
				}).then(res => {
					that.$utils.pageckForIn(that.form,res.data.data)
					that.form.is_default == 2 ? that.isSwitch = false : that.isSwitch = true
					that.addShow = true
				})
			},
			// 微信定位
			WXAddress() {
				let that = this
				uni.chooseLocation({
					success(res) {
						that.form.receipt_address = res.address
						that.form.lng = res.longitude
						that.form.lat = res.latitude
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 性格选择
			radioGroupChange(e) {
				console.log(e)
			},
			// 跳转商家店铺选择
			goChoiceShop(){
				uni.navigateTo({
					url: '/pages/shop/choiceShop/choiceShop?shop_id=' + this.shopAddress.shop_id
				})
			},
		}
	}
</script>

<style lang="less">
	.address-main{
		position: fixed;
		left: 0;
		top: 0;
		padding-bottom: 40rpx;
		overflow-y: auto;
		right: 0;
		bottom: 100rpx;
		padding: 30rpx 0;
		margin: 0 auto;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	page {
		background-color: #F9F9F9;
	}

	.address {
		width: 100vw;

		.shop {
			width: 90%;
			margin: 0 auto;

			.title {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
			}

			.shopAddress {
				width: 100%;
				height: 200rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.address {
					font-size: 24rpx;
					font-weight: 400;
					color: #7F8084;
				}

				.name {
					font-size: 26rpx;
					font-weight: 400;
					color: #000000;
					margin: 10rpx 0rpx;
				}

				.timeBox {
					margin-top: 10rpx;

					.time_l {
						image {
							width: 22rpx;
							height: 26rpx;
							margin-right: 15rpx;
						}

						.text {
							font-size: 24rpx;
							color: #474747;
							font-weight: 400;
						}
					}

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}


		.listBox {
			width: 90%;
			margin: 0 auto;
			.title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
			}

			.list {
				width: 100%;
				height: 194rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.list_t {

					.title {
						width: 70%;
						font-size: 28rpx;
						font-weight: 400;
					}

					.default {
						font-size: 24rpx;
						font-weight: 400;
						color: #B6B6B6;
					}
				}

				.list_b {
					font-size: 24rpx;
					font-weight: 400;
					color: #7F8084;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}


		.btn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 80rpx;
			background-color: #000;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			position: fixed;
			left: 50%;
			bottom: 25rpx;
			margin-top: 0rpx;
			transform: translateX(-50%);
		}



		.form {
			width: 90%;
			margin: 0 auto;
			margin-top: 40rpx;

			.list {
				width: 100%;
				height: 110rpx;
				border-bottom: 1px solid #EFEFEF;

				.text {
					font-size: 28rpx;
					font-weight: 400;
					color: #000;
				}

				input {
					text-align: right;
				}
			}

			.default {
				margin-top: 40rpx;
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #7F8084;
				font-weight: 400;
			}

			.popupBtn {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 96rpx;
				background-color: #000;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 100rpx;
			}

			.deleteBtn {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 96rpx;
				background-color: #DCDCDC;
				color: #7F8084;
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
			}

		}


	}
</style>
